<template>
    <div>
      <div style="margin: 10px 0;">
        <el-form :rules="queryForm" ref="queryForm" :model="queryForm">
            <el-input style="width: 230px;" placeholder="请输入公告标题" suffix-icon="el-icon-search" v-model="queryForm.name"></el-input>
            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </el-form>
      </div>

      <div style="margin: 10px 0;">
        <el-button type="primary" plain @click="handelAdd"><i class="el-icon-circle-plus-outline"></i> 新增</el-button>
      </div>
      
      <el-table :data="tableData" :header-cell-class-name="'headerBg'" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- <el-table-column prop="id" label="ID" width="80"></el-table-column> -->
        <el-table-column prop="name" label="文章标题"></el-table-column>
        <el-table-column prop="content" label="文章内容">
          <template slot-scope="scope">
            <el-button @click="view(scope.row.content)" type="text">查看内容</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="user" label="发布人"></el-table-column>
        <el-table-column prop="time" label="发布时间"></el-table-column>
        <el-table-column label="操作" width="280" align="center">
          <template slot-scope="scope"> 
            <el-button type="text" size="mini" @click="handelEdit(scope.row)"><i class="el-icon-edit"></i> 编辑</el-button>
            <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除这些数据吗"
              @confirm="del(scope.row.id)"
              >
            <el-button type="text" size="mini" slot="reference"><i class="el-icon-remove-outline"></i> 删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding: 10px 0;">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      </div>

      <el-dialog title="公告信息" :visible.sync="dialogFormVisible" width="60%">
        <el-form label-width="80px" size="small" ref="form" :model="form" :rules="form" :inline="true">
          <el-input v-model="form.id" placeholder="id" type="hidden"></el-input>

          <el-form-item label="公告标题">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="公告内容">
            <mavon-editor ref="md" v-model="form.content" :ishljs="true" @imgAdd="imgAdd" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="公告信息" :visible.sync="viewDialogVis" width="60%">
        <el-card>
          <div>
            <mavon-editor 
            class="md"
            :value="content"
            :subfield="false"
            :defaultOpen="'preview'"
            :toolbarsFlag="false"
            :editable="false"
            :scrollStyle="true"
            :ishljs="true"
            />
          </div>
        </el-card>
      </el-dialog>
    </div>
</template>

<script>

import axios from 'axios'

export default {
    name: 'Article',
    data() {
     return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      dialogFormVisible: false,
      value: true,
      teachers: [],
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}, // 获取当前登录用户信息
      form:{
        name: '',
        content: '',
        user: '',
        time: '',
      },
      queryForm:{
        name: '',
      },
      multipleSelection : [],
      content: '',
      viewDialogVis: false,
     }
    },
    created(){
    //请求分页查询
    this.load()
  },
    methods: {
        view(content) {
          this.content = content
          this.viewDialogVis = true
        },
        //绑定@imgAdd event
        imgAdd(pos, $file) {
          let $vm = this.$refs.md
          //第一步 将图片上传服务器
          const formData = new FormData()
          formData.append('file', $file)
          axios({
            url: 'http://localhost:8081/file/upload',
            method: 'post',
            data: formData,
            headers: {'Content-Type': 'multipart/form-data'}
          }).then(res => {
            //第二步 将返回的图片地址插入到md编辑器中
            $vm.$img2Url(pos, res.data)
          })
        },

    load(){
          this.request.get("/article/page",{
          params:{
            pageNum:this.pageNum,
            pageSize:this.pageSize,
            name:this.queryForm.name,
          }
        }).then(res => {
          // console.log(res);
          this.tableData = res.records
          this.total = res.total
        })
    },
    changeEnable(){
      this.request.post("/article/update",row).then(res => {
        if(res.code === 200){
          this.$message.success("操作成功")
        }
      })
    },
  save(){
    this.request({method: "post",url: "/article/save",
        data:{
          "id": this.form.id,
          "name": this.form.name,
          "content": this.form.content,
          "user": this.form.user,
          "time": this.form.time,
        },
        //请求头
        headers: { 'Content-Type': 'application/json' },
      }).then(res => {
        if(res){
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        }else{
          this.$message.error("保存失败")
       }
      })
  },
  handelAdd(){
    this.dialogFormVisible = true
    this.form = {}
  },
  handelEdit(row){
    this.form = row
    this.dialogFormVisible = true
  },
  del(id){
    this.request.delete("/article/" + id).then(res =>{
      if(res){
        this.$message.success("删除成功")
        this.load()
      }else{
        this.$message.error("删除失败")
      }
    })
  },
  handleSelectionChange(val) {
    console.log(val);
    this.multipleSelection = val
  },
  reset(){
    this.queryForm.name = ""
    this.load()
  },
  handleSizeChange(pageSize){
    console.log(pageSize);
    this.pageSize = pageSize;
    this.load()
  },handleCurrentChange(pageNum){
    console.log(pageNum);
    this.pageNum = pageNum;
    this.load()
  }
    }
}
</script>

<style>
.headerBg {
  background: #f8f8f9 !important;
}
</style>